<template>
  <div id="lb-header">
    <div id="logo" class="inl">
      <img style="vertical-align: middle " src="../assets/logo.jpg">
      <el-link href="/" :underline="false" style="font: 40px Segoe;color:#ee5b7a">𝖆𝖉 𝖆𝖘𝖙𝖗𝖆</el-link>
      <div id="nav" class="inl">
        <el-link :underline="false" type="primary" @click="goto('/')">主页</el-link>
        <el-link :underline="false" type="primary" @click="goto('/explore')">探索</el-link>
        <el-link :underline="false" type="primary" @click="goto('/live')">直播</el-link>
      </div>
    </div>
    <div id="search" class="inl">
      <div id="search-input" class="inl s-c">
        <el-input
            @keydown.native.enter="search"
            style="width:300px;"
            placeholder="请输入搜索内容"
            size="small"
            prefix-icon="el-icon-search"
            v-model="keyword">
        </el-input>
      </div>
      <div id="search-bt" class="inl">
        <el-button icon="el-icon-search" @click="search" size="mini" type="primary" round>搜索</el-button>
      </div>
    </div>
    <div id="user" class="inl">
      <div id="userinfo" class="inl">
        <div @click="goto('/user')" v-if="$store.state.user.username">
          <el-tooltip class="item" effect="light" content="个人中心" placement="bottom">
            <div id="avatar1" v-if="$store.state.vip===true">
              <div id="vipBox">
                <img src="../assets/box.webp">
              </div>
              <el-avatar :src="$store.state.avatar" size="large"></el-avatar>
            </div>
            <div id="avatar2" v-else>
              <el-avatar :src="$store.state.avatar" size="large"></el-avatar>
            </div>
          </el-tooltip>
        </div>

        <div v-else>
          <el-link @click="loginVisible = true" :underline="false" type="primary">登录</el-link>
          <el-dialog
              :visible.sync="loginVisible"
              destroy-on-close="true"
              width="35%">
            <Account></Account>
          </el-dialog>
        </div>

      </div>
      <div id="appInfo" class="inl">
        <div id="dynamic" class="inl app-info" @click="gotoUser('/vip')">
          <div id="d-icon" class="mess">
            <el-link icon="el-icon-present" type="primary" :underline="false"></el-link>
          </div>
          <div class="mess">
            <el-link type="primary" :underline="false">会员</el-link>
          </div>
        </div>
        <div id="message" class="inl app-info" @click="gotoUser('/message')">
          <div id="m-icon" class="mess">
            <el-badge :value="$store.state.user.msg" :hidden="$store.state.user.msg===0" type="primary ">
              <el-link icon="el-icon-message" type="primary" :underline="false"></el-link>
            </el-badge>
          </div>
          <div class="mess">
            <el-link type="primary" :underline="false">消息</el-link>
          </div>
        </div>
        <div id="collect" class="inl app-info" @click="gotoUser('/collection')">
          <div id="c-icon" class="mess">
            <el-link icon="el-icon-star-off" type="primary" :underline="false"></el-link>
          </div>
          <div class="mess">
            <el-link type="primary" :underline="false">收藏</el-link>
          </div>
        </div>
        <div id="history" class="inl app-info" @click="gotoUser('/history')">
          <div id="h-icon" class="mess">
            <el-link icon="el-icon-video-camera" type="primary" :underline="false"></el-link>
          </div>
          <div class="mess">
            <el-link type="primary" :underline="false">历史</el-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Account from '@/views/Account'

export default {
  name: "LBHeader",
  components: {Account},
  data() {
    return {
      keyword: "",
      loginVisible: false,
      mode: 'login'
    }
  },
  mounted() {
    this.$bus.$on('show', this.show)
    this.$bus.$on('close', this.close)
  },
  methods: {
    tips(message) {
      this.$message({
        message: message,
        type: 'success'
      });
    },
    show() {
      this.loginVisible = true
    },
    close() {
      this.loginVisible = false
    },
    gotoUser(type) {
      if (this.$store.state.user.id) {
        if (this.$route.path !== type) {
          this.$router.push(type)
        }
      } else {
        this.tips("请先登录")
      }
    },
    goto(type) {
      if (this.$route.path !== type) {
        this.$router.push(type)
      }
    },
    search: function () {
      if (this.keyword.replaceAll(" ", '') !== "") {
        if (this.$route.path === '/search') {
          console.log('/')
          this.$router.push('/').then(res => {
            this.$router.push({
              path: '/search',
              query: {
                keyword: this.keyword
              }
            })
          })
        } else {
          this.$router.push({
            path: '/search',
            query: {
              keyword: this.keyword
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped>
#vipBox img {
  width: 100%;
  height: 100%;
}

#vipBox {
  position: absolute;
  left: -7px;
  top: -10px;
  width: 55px;
  height: 55px;
}

#nav a {
  font-size: 20px;
  padding-left: 25px;
}

#avatar1 {
  position: absolute;
  top: -27px;
  left: -30px
}

#avatar2 {
  position: absolute;
  top: -27px;
  left: -30px
}

#search {
  background-color: #f6f6f6;
  border-radius: 7px;
  padding: 10px;
  position: relative;
  height: 32px;
}

#search-bt {
  margin-left: 5px;
}

#user {
  position: relative;
}

#appInfo a {
  font-size: 18px;
}

.app-info {
  padding-left: 15px;
}

#userinfo {
  position: relative;
  top: -7px;
  left: -5px;
}

#userinfo a {
  font-size: larger;
}

#lb-header {
  margin-top: 5px;
  border-bottom: 2px solid #ee5b7a;
  display: flex;
  justify-content: space-between;
  height: 60px;
}
</style>
